<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-pdf-reader</title>
    <script src="//unpkg.com/vue@2.5.22/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
    <script src="//unpkg.com/vue-pdf-reader@0.2.8/dist/vue-pdf-reader.min.js"></script>
    <link href="//unpkg.com/vue-pdf-reader@0.2.8/dist/vue-pdf-reader.min.css" rel="stylesheet" type="text/css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="UApp">
    <div>
        <button @click="dialogVisible4Pdf = true">打开预览</button>
        <button @click="pv1()">打开预览1</button>
        <button @click="pv2()">打开预览2</button>
    </div>
    <template>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible4Pdf"
                width="80%">
            <template>
                <div style="width: 100%; height: 100%">
                    <vue-pdf-reader :url="pdfUrl" loading-text="PDF加载中"/>
                </div>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible4Pdf = false">关 闭</el-button>
            </span>
        </el-dialog>
    </template>
</div>

</body>
<script>
    Vue.use(VuePdfReader);
    console.log('VuePdfReader');
    console.log(VuePdfReader);
    var vueApp = new Vue({
        el: '#UApp',
        // router,
        components: {
            // 'vue-pdf-reader': VuePdfReader
        },
        mounted() {
            console.log('mounted');
        },
        data() {
            return {
                dialogVisible4Pdf: false,
                currentPage: 0,
                pageCount: 0,
                urls:[
                    'https://www.nvidia.com/content/dam/en-zz/zh_cn/Solutions/Data-Center/tesla-v100/volta-v100-datasheet-update-a4-nv-636418-r4-lr.pdf',
                    'https://www.nvidia.com/content/dam/en-zz/Solutions/Data-Center/tesla-product-literature/Tesla-TensorRT-Inference-Infographic.pdf',
                ],
                pdfUrl:'',
            }
        },
        methods: {
            pv1(){
                this.dialogVisible4Pdf = true;
                this.pdfUrl = this.urls[0];
            },
            pv2(){
                this.dialogVisible4Pdf = true
                this.pdfUrl = this.urls[1];
            }
        },
    });

    console.log('欢迎查看开发者Vue调试报告');
</script>
</html>
